<template>
	<view class="main-page">
		<view class="header-box row-container-top">
			<image :src="headerTeamImgUrl" class="bg-header" mode="aspectFill"></image>
			<view class="title-container">
				<text class="font-fff-36 font-weight-600">赚钱</text>
			</view>
		</view>
		<view class="rule-box">
			<image class="rule-box-bg" :src="ruleBgUrl" mode="aspectFill"></image>
			<image class="share-rule-btn" src="../../static/ic_share_rule.png" @click="showRuleWindow = true"></image>
			<view class="row-container-center mt-105" style="z-index: 10;">
				<view class="single-order-main">
					<view class="single-order-box">
						<image class="single-order-bg" src="../../static/ic_first_order.png"></image>
						<view class="row-container-center mt-10" style="z-index: 30;">
							<text class="font-f3324f-24 font-weight-700">¥</text>
							<text class="font-f3324f-44 font-weight-700">{{firstOrderAmount}}</text>
						</view>
					</view>
				</view>
				<image class="wh-28" src="../../static/ic_order_arrow.png"></image>
				<view class="single-order-main">
					<view class="single-order-box">
						<image class="single-order-bg" src="../../static/ic_second_order.png"></image>
						<view class="row-container-center mt-10" style="z-index: 30;">
							<text class="font-f3324f-24 font-weight-700">¥</text>
							<text class="font-f3324f-44 font-weight-700">{{secondOrderAmount}}</text>
						</view>
					</view>
				</view>
				<image class="wh-28" src="../../static/ic_order_arrow.png"></image>
				<view class="single-order-main">
					<view class="single-order-box">
						<image class="single-order-bg" src="../../static/ic_third_order.png"></image>
						<view class="row-container-center mt-10" style="z-index: 30;">
							<text class="font-f3324f-24 font-weight-700">¥</text>
							<text class="font-f3324f-44 font-weight-700">{{thirdOrderAmount}}</text>
						</view>
					</view>
					<view class="top-amount-flag">
						<image class="top-amount-bg" src="../../static/ic_top_amount.png"></image>
						<text class="font-fff-20 mt-2"
						 style="color: #FFFEF3;z-index: 30;">最高随机</text>
					</view>
				</view>
				<image class="wh-28" src="../../static/ic_order_arrow.png"></image>
				<view class="single-order-main">
					<view class="single-order-box">
						<image class="single-order-bg" src="../../static/ic_other_order.png"></image>
						<view class="row-container-center mt-10" style="z-index: 30;">
							<text class="font-f3324f-24 font-weight-700">¥</text>
							<text class="font-f3324f-44 font-weight-700">2</text>
						</view>
					</view>
					<view class="top-amount-flag">
						<image class="top-amount-bg" src="../../static/ic_top_amount.png"></image>
						<text class="font-fff-20 mt-2" style="color: #FFFEF3;z-index: 30;">最高随机</text>
					</view>
				</view>
			</view>
			
			<text class="share-rule-text">团员首单3元，第二单5元，第三单最高10元，之后每单最高2元。</text>
			
		</view>
		<view class="share-way-box">
			<image class="share-way-bg" :src="shareWayBgUrl"></image>
			<view class="row-container-center mt-75">
				<view class="share-single-box mr-15" @click="clickShare(0)">
					<image class="share-single-bg" src="../../static/ic_team_share_cycle.png"></image>
				</view>
				<view class="share-single-box mr-15">
					<button open-type="share" class="share-btn"></button>
					<image class="share-single-bg" src="../../static/ic_team_share_wechat.png"></image>
				</view>
				<view class="share-single-box" @click="clickShare(1)">
					<image class="share-single-bg" src="../../static/ic_team_share_save.png"></image>
				</view>
			</view>
			
			<view class="member-list">
				<text class="font-333-56 font-weight-600">{{teamData.teamAllIntegral}}</text>
				<text class="font-333-26 mt-2">干饭团总贡献(元)</text>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="font-333-32 font-weight-600">我的干饭团成员</text>
					<text class="font-999-24">总计{{teamData.teamPepoleCount}}人</text>
				</view>
				
				<view class="column-container-center width-100p mt-40" style="z-index: 20;" v-if="memberList.length < 1">
					<image class="empty-ic" src="../../static/ic_empty_team.png"></image>
					<text class="font-333-32 font-weight-600 mb-10">您目前还没有团队成员</text>
					<text class="font-999-28" style="margin-bottom: 34rpx;">赶快用上面的方式招募新成员吧！</text>
				</view>
				
				<view class="column-container-row-center width-100p" style="z-index: 20;" v-if="memberList.length > 0">
					<view class="row-container width-100p mt-30">
						<view class="row-container" style="width: 50%;">
							<text class="font-999-24">排名</text>
							<text class="font-999-24" style="margin-left: 38rpx;">团员名称</text>
						</view>
						<view class="row-container-row-between" style="width: 50%;">
							<text class="font-999-24">干饭头衔</text>
							<text class="font-999-24" style="margin-left: 38rpx;">干饭贡献</text>
						</view>
					</view>
					<view class="row-container width-100p mt-30"
						v-for="(item , index) in memberList" :key="index">
						<view class="row-container" style="width: 50%;">
							<image class="medal-ic" src="../../static/ic_gold.png" v-if="index == 0"></image>
							<image class="medal-ic" src="../../static/ic_silver.png" v-if="index == 1"></image>
							<image class="medal-ic" src="../../static/ic_bronze.png" v-if="index == 2"></image>
							<text class="font-333-26 font-weight-600 mr-30" style="white-space: nowrap;
							text-overflow: ellipsis;overflow: hidden;">{{item.nickName}}</text>
						</view>
						<view class="row-container-row-between" style="width: 50%;">
							<text class="font-333-26" v-if="item.profferIntegral > 0">干饭精锐</text>
							<text class="font-333-26" v-else>干饭新人</text>
							<text class="font-333-26">+{{item.profferIntegral}}元</text>
						</view>
					</view>
					<text class="check-all" @click="gotoMemberList">查看所有成员</text>
				</view>
			</view>
		</view>
		
		<!-- 分享弹窗 -->
		<view class="share-window" v-if="showShareWindow" @click="showShareWindow = false">
			<!-- <view class="share-img-container" > -->
				<!-- <image src="../../static/bg_share.png" class="share-bg"></image> -->
				<!-- <image class="share-code" :src="qrCodeImg"></image> -->
				<canvas canvas-id="shareCanvas" 
				:style="{width:canvasW+'px' , height:canvasH + 'px'}"
				></canvas>
			<!-- </view> -->
			<view class="row-container mt-24">
				<text class="font-fff-32 font-weight-600">图片已保存到</text>
				<text class="font-ffd-32 font-weight-600">本地相册</text>
			</view>
			<view class="row-container mt-8">
				<text class="font-fff-32 font-weight-600">快去</text>
				<text class="font-ffd-32 font-weight-600">朋友圈</text>
				<text class="font-fff-32 font-weight-600">分享海报招募成员吧</text>
			</view>
		</view>
		
		<!-- 规则弹窗 -->
		<view class="rule-window" v-if="showRuleWindow">
			<view class="rule-window-main">
				<image class="window-head-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600" style="z-index: 110;">干饭团规则说明</text>
				<text class="rule-text">
					1、将邀请图片或链接发给微信好友，若好友为新用户，则可以成为您的干饭团成员；
					2、您的干饭团成员，第一次点餐并通过审核，您可以获得3元奖励，第二单，您可以获得5元奖励，第三单，奖励金额随机，最高金额不超过10元，之后每单，您都可以获得佣金，最高1元；
					3、佣金将自动计入到账户余额，您可以在我的>余额记录中查看详情；
				</text>
				<text class="close-btn" @click="showRuleWindow = false">我知道了</text>
			</view>
		</view>
		
		<view style="width: 100%;" v-if="showAuthWindow">
			<AuthWindow></AuthWindow>
		</view>
		
	</view>
</template>

<script>
	import AuthWindow from '../../components/authWindow.vue'
	
	export default {
		data() {
			return {
				memberList:[],
				teamData:{
					teamPepoleCount:0,
					teamAllIntegral:0
				},
				showShareWindow:false,
				qrCodeImg:'',
				qrBgImg: "https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/20240531132928.png",
				canvasW:250,
				canvasH:445,
				ctx:null,
				showAuthWindow:false,
				showRuleWindow:false,
				headerTeamImgUrl:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/20240603122430.png',
				ruleBgUrl:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/20240715140041.png',
				shareWayBgUrl:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/20240603122439.png',
				
				headerInviteImgUrl:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/20240531095410.png',
				firstOrderAmount:'3',
				secondOrderAmount:'5' ,
				thirdOrderAmount:'10' 
			}
		},
		
		onShareAppMessage(res) {
			let that = this
			return{
				title:'参与最星城霸王餐平台活动，5元吃外卖！',
				path:'/pages/index/index?inviteUserId=' + that.cookie.get("jx_userId"),
				imageUrl:'https://jxshoss.oss-cn-qingdao.aliyuncs.com/common/20240423151942.png'
			}
		},
		
		components:{
			AuthWindow
		},
		
		onLoad(options) {
			uni.showTabBar()
			
			if (options.inviteUserId){
				this.cookie.set("jx_inviteUserId" , options.inviteUserId)
			}
			
			this.loadTeamData()
			this.loadAmountData()
			this.loadMemberList()
			this.loadQrCode()
			
			let that = this
			uni.$on("authSuccess" , ()=>{
				that.showAuthWindow = false
				this.loadAmountData()
				that.loadTeamData()
				that.loadMemberList()
				that.loadQrCode()
			})
			uni.$on("authCancel" , ()=>{
				that.showAuthWindow = false
			})
		},
		
		onShow() {
			if (!this.cookie.get('jx_token')){  // 未授权店登录
				this.showAuthWindow = true
			}
		},
		
		onPullDownRefresh() {
			this.loadTeamData()
			this.loadAmountData()
			this.loadMemberList()
		},
		
		methods: {
			gotoMemberList(){
				uni.navigateTo({
					url:'/pages/mine/member?allCount=' + this.teamData.teamPepoleCount
				})
			},
			
			loadTeamData(){
				let that = this
				this.http({
					url:"/user/teamData",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.teamData = data.data
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			loadAmountData(){
				let that = this
				this.http({
					url:"/common/inviteUser",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200 && data.data){
							that.firstOrderAmount = data.data.split('|')[0]
							that.secondOrderAmount = data.data.split('|')[1]
							let third = data.data.split('|')[2]
							that.thirdOrderAmount = third.split('_')[1]
						}
					},
					failed(e){
					}
				})
			},
			
			loadMemberList(){
				let that = this
				this.http({
					url:'/user/inviteList',
					method:'POST',
					data:{
						pageNo : 1,
						pageSize : 3
					},
					success(res){
						if (res.code == 200){
							that.memberList = res.data
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			//加载微信小程序码  用于分享
			loadQrCode(){
				let that = this
				this.http({
					url:'/weixin/createQrCode',
					method:'GET',
					data:{
					},
					success(res){
						if (res.code == 200){
							that.qrCodeImg = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			
			//点击分享  0朋友圈  1保存图片
			clickShare(type){
				let that = this
				
				this.showShareWindow = true
				that.ctx = uni.createCanvasContext("shareCanvas" , this);
				that.ctx.beginPath(); 
				
				uni.getImageInfo({
					src:that.qrBgImg,
					success(bgInfo) {
						that.ctx.drawImage(bgInfo.path , 0 , 0 , 250 , 445);
						
						uni.getImageInfo({
							src:that.qrCodeImg,
							success(infoRes) {
								that.ctx.drawImage(infoRes.path , 99 , 348 , 50 , 50);
								that.ctx.draw(false , (ret)=>{
									uni.canvasToTempFilePath({
										canvasId:"shareCanvas",
										quality:1,
										success(res) {
											if (res.tempFilePath){
												var postDataUrl = res.tempFilePath.replace(/[\r\n]/g,'');
												uni.saveImageToPhotosAlbum({
													filePath:postDataUrl,
													success() {
														console.log("图片已保存到相册")
													},
													fail(e) {
														console.log("图片保存失败----" + JSON.stringify(e))
													}
												})
											}
										},
										
										fail(e) {
											console.log("图片保存失败1111----" + JSON.stringify(e))
										}
									})
									
								})
								
							}
						})
					}
				})
				
				
				
				
				
				
			}
			
			
		}
	}
</script>

<style lang="scss">
	.header-box{
		width: 100%;
		height: 314rpx;
		position: relative;
		
		.bg-header{
			width: 100%;
			height: 314rpx;
			position: absolute;
		}
		
		.title-container{
			width: 100%;
			height: 88rpx;
			margin-top: 88rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			z-index: 50;
		}
	}
	
	.rule-box{
		width: 100%;
		height: 374rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.rule-box-bg{
			width: 100%;
			height: 442rpx;
			position: absolute;
		}
		
		.share-rule-btn{
			width: 110rpx;
			height: 40rpx;
			position: absolute;
			right: 52rpx;
			top: 0rpx;
			z-index: 10;
		}
		
		.share-rule-text{
			color: #F3324F;
			font-size: 24rpx;
			max-width: 540rpx;
			line-height: 34rpx;
			margin-top: 5rpx;
			text-align: center;
			z-index: 10;
			font-weight: 600;
		}
		
		.single-order-main{
			width: 130rpx;
			height: 146rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			
			.top-amount-flag{
				width: 91rpx;
				height: 38rpx;
				position: absolute;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 20;
				
				.top-amount-bg{
					width: 91rpx;
					height: 38rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			
			.single-order-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 130rpx;
				height: 130rpx;
				position: relative;
				margin-top: 16rpx;
				
				.single-order-bg{
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					top: 0;
				}
				
			}
		}
	}
	
	.share-way-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		position: relative;
		background: #F5F5F5;
		
		.share-way-bg{
			width: 100%;
			height: 538rpx;
			position: absolute;
		}
		
		.share-single-box{
			width: 200rpx;
			height: 163rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 20;
			
			.share-single-bg{
				width: 200rpx;
				height: 163rpx;
				position: absolute;
			}
			
			.share-btn{
				width: 100%;
				height: 100%;
				background: transparent;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 30;
			}
		}
		
	}
	
	.member-list{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 108rpx);
		margin: 50rpx 30rpx 20rpx 30rpx;
		padding: 40rpx 24rpx 30rpx 24rpx;
		border-radius: 30rpx;
		z-index: 30;
		background: white;
		
		.medal-ic{
			width: 54rpx;
			height: 54rpx;
			margin-right: 32rpx;
		}
		
		.avatar-ic{
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			margin-right: 16rpx;
		}
		
		.check-all{
			width: 226rpx;
			padding: 18rpx 0;
			text-align: center;
			color: #333333;
			font-size: 28rpx;
			font-weight: 600;
			background-color: #FEF6EC;
			border-radius: 10rpx;
			margin-top: 40rpx;
			
		}
		
		.empty-ic{
			width: 172rpx;
			height: 172rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.invite-more-container{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 46rpx;
		background-color: white;
		border-radius: 16rpx;
		
		.hint-container{
			width: 100%;
			height: 170rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 36rpx;
			
			.hint-bg{
				width: calc(100% - 82rpx);
				height: 170rpx;
				position: absolute;
			}
			
			.hint-text{
				width: calc(100% - 138rpx);
				margin-top: 24rpx;
				text-align: center;
				color:white;
				font-size: 28rpx;
				font-weight: 600;
				z-index: 10;
				line-height: 40rpx;
			}
			
			.line-bg{
				width: 100%;
				height: 20rpx;
				position: absolute;
				bottom: 0;
			}
			
			.question-icon{
				width: 28rpx;
				height: 28rpx;
				z-index: 10;
				position: absolute;
				bottom: 0rpx;
				right: 200rpx;
			}
			
		}
		
		.share-img{
			width: 66rpx;
			height: 66rpx;
			margin-bottom: 14rpx;
		}
	}
	
	button::after {
		border: none;//去除边框
	}
	
	.share-window{
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 101;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		
		.share-img-container{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 500rpx;
			height: 890rpx;
			position: relative;
			
			.share-bg{
				width: 500rpx;
				height: 890rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.share-code{
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				bottom: 95rpx;
				z-index: 110;
			}
			
		}
		
	}
	
	.rule-window{
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 101;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		
		.rule-window-main{
			display: flex;
			flex-direction: column;
			width: calc(100% - 144rpx);
			padding: 44rpx 0rpx;
			background-color: white;
			border-radius: 30rpx;
			position: relative;
			align-items: center;
			
			.window-head-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
			}
			
			.rule-text{
				color: #666666;
				font-size: 24rpx;
				margin: 42rpx 44rpx 50rpx 44rpx;
				line-height: 39rpx;
			}
			
			.close-btn{
				width: calc(100% - 88rpx);
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				color: #333333;
				font-size: 32rpx;
			}
			
			
		}
		
	}
	
</style>
